<%@ page language="java" contentType="text/html; charset=utf-8"   pageEncoding="utf-8"%>
  
<html>
  <head>
 
	<script src="js/jquery-1.9.1.js"></script>
	<!-- 富文本编辑器 -->
	 <link rel="stylesheet" href="js/kdeditor/themes/default/default.css" />
    
	 <script charset="utf-8" src="js/kdeditor/kindeditor-min.js"></script>
	 <script charset="utf-8" src="js/kdeditor/lang/zh_CN.js"></script>  
		 
  </head>
  
  <body> 
		<textarea id="editor_id"  name="content" style="width:700px;height:150px;">
			&lt;strong&gt;HTML内容&lt;/strong&gt;
		</textarea>
		
		<div id="img_div1" ></div>
		<input id="selfImgPlus1"     type="button" class="copyImgBtn" value="单独调用 上传附件" />
		
		<div id="img_div2" ></div>
		<input id="selfImgPlus2"    type="button" class="copyImgBtn" value="单独调用上传插件" />

		<div id="img_div3" ></div>
		<input id="selfImgPlus3"     type="button" class="copyImgBtn" value="单独调用批量上传插件" />
		
  </body>
  <script>
  var editor;
  KindEditor.ready(function(K) { 
  	 editor = K.create("#editor_id");
  })
  
   //-------------------单独调用  上传附件 插件------------------
  var editor1;
  KindEditor.ready(function(K) { 
  	 editor1 = K.editor({
		uploadJson:"modul1/kindEditor.do", 
    });
  })
  $("#selfImgPlus1").click(function(){
		editor1.loadPlugin("insertfile",function(){
			editor1.plugin.fileDialog({
				showRemote:false,
				clickFn: function (url, title, width, height, border, align) {
					console.log("url:"+url+"   title:"+title+"   width:"+width+"   height:"+height+"   border:"+border)
					var htmlEl='<a class="ke-insertfile" href="'+url+'" target="_blank">'+title+'</a>';
					$("#img_div1").html(htmlEl);
					editor1.hideDialog(); 
				}
			});
		}) 
	})
  //-------------------单独调用上传插件------------------
  var editor2;
  KindEditor.ready(function(K) { 
  	 editor2 = K.editor({
  	 	filePostName  : "imgFile",
		uploadJson:"modul1/kindEditor.do?dir=image", 
    });
  })
  $("#selfImgPlus2").click(function(){
		editor2.loadPlugin("image",function(){
			editor2.plugin.imageDialog({
				showRemote:false,
				clickFn: function (url, title, width, height, border, align) {
					console.log("url:"+url+"   title:"+title+"   width:"+width+"   height:"+height+"   border:"+border)
					var htmlEl="<img src='"+url+"' title='"+title+"' />";
					$("#img_div2").html(htmlEl);
					editor2.hideDialog(); 
				}
			});
		}) 
	})
	
	//-------------------单独调用批量上传插件------------------
	var editor3;
	  KindEditor.ready(function(K) { 
	  	 editor3 = K.editor({
			uploadJson:"modul1/kindEditor.do", 
	    });
	  })
	$("#selfImgPlus3").click(function(){
		editor3.loadPlugin("multiimage",function(){
			editor3.plugin.multiImageDialog ({
				showRemote:false,
				clickFn: function (obj) {
					console.log(obj)
					 var htmlEl;
					$.each(obj, function(idx, obj) {
					     htmlEl=htmlEl+"<img src='"+obj.url+"' title='"+obj.title+"' />";
					});
					console.log(htmlEl)
					$("#img_div3").html(htmlEl);
					editor3.hideDialog()
				}
			});
		}) 
	})
  </script>
  